<template>
    <div class="app-container home" style="display: flex;">
        <div
            style="display: flex;flex-direction: row;width: 100%;height: 850px;justify-content: space-between;">
            <div style="display: flex;flex-direction: column;width: 25%;height: 100%;">
                <div style="justify-content: center;display: flex;margin-top: 25px;margin-bottom: -30px;">
                    <!-- 次数-->
                    <a>连续预警人数分布</a>
                </div>
                <div style="display: flex;width: 100%;height: 32%;">
                    <left1-vue></left1-vue>
                </div>
                <div style="justify-content: center;display: flex;margin-bottom: 20px;">
                    <!-- 成绩预警，学分预警，上课预警...-->
                    <a>预警种类人数分布</a>
                </div>
                <div style="display: flex;width: 100%;height: 26%;">
                    <left2-vue></left2-vue>
                </div>
                <div style="justify-content: center;display: flex;margin-top: 40px;margin-bottom: -20px;">
                    <!-- 哪个简单选哪个-->
                    <a>近5日/5次预警趋势</a>
                </div>
                <div style="display: flex;width: 100%;height: 32%;">
                    <left3-vue></left3-vue>
                </div>
            </div>
            <div style="display: flex;flex-direction: column;width: 50%;height: 100%;">
                <center1-vue></center1-vue>
                <div style="justify-content: center;display: flex;margin-top: 20px;margin-bottom: 20px;">
                    <a>详情展示</a>
                </div>
                 <center2-vue></center2-vue>
            </div>
            <div style="display: flex;flex-direction: column;width: 25%;height: 100%;">
                <div style="justify-content: center;display: flex;margin-top: 25px;margin-bottom: -30px;">
                    <!-- 次数-->
                    <a>预警年级分布</a>
                </div>
                <div style="display: flex;width: 100%;height: 50%;">
                    <right1-vue></right1-vue>
                </div>
<!--                <div
                    style="display: flex;width: 100%;height: 30%;justify-content: center;align-items: center;flex-direction: column;margin-top: -22%;">
                    <div style="justify-content: center;display: flex;margin-bottom: 20px;">
                        <a>预警性别分布</a>
                    </div>
                    <el-table :data="userList" @selection-change="handleSelectionChange" style="width: 98%;">
                        <el-table-column type="index" label="" width="40" />
                        <el-table-column label="%" align="center" key="row" prop="row" width="60"/>
                        <el-table-column label="男生" align="center" key="boy" prop="boy" />
                        <el-table-column label="女生" align="center" key="girl" prop="girl"
                            :show-overflow-tooltip="true"  />
                    </el-table>
                </div> -->
                <div style="justify-content: center;display: flex;margin-top: 0px;margin-bottom: -20px;">
                    <!-- 次数-->
                    <a>下次预警可能人群数</a>
                </div>
                
                <div style="display: flex;width: 100%;height: 70%;">
                    <right2-vue></right2-vue>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup >
    import left1Vue from '../../../components/aaaIndex/left1.vue';
    import left2Vue from '../../../components/aaaIndex/left2.vue';
    import left3Vue from '../../../components/aaaIndex/left3.vue';
    import right1Vue from '../../../components/aaaIndex/right1.vue';
    import right2Vue from '../../../components/aaaIndex/right2.vue';
    import center1Vue from '../../../components/aaaIndex/center1.vue';
    import center2Vue from '../../../components/aaaIndex/center2.vue';
</script>

<style scoped lang="scss">
</style>